<template>
  <view class="andry-collection-list">
    <view class="u-search-box-content">
      <search class="u-search-box" />
    </view>
    <view class="product-list">
      <view v-for="(record, index1) in productList" :key="index1" class="card">
        <ShopCard1 v-if="optionsType=='changegood'" :orderid="orderid" class="items" :item="record"  />
        <ShopCard v-else class="items" :item="record"  />
      </view>
      <up-divider v-if="productList.length>pageSize"  :text="loadStatus"></up-divider>
    </view>
  </view>
</template>

<script setup>
import { IMG_URL2 } from "@/config";
import { shopApi } from "@/api";
import search from "@/components/search/search.vue";
import ShopCard from "@/components/shop/card.vue";
import ShopCard1 from "@/components/shop/card1.vue";
const productList = ref([]);
let pageSize = ref(10)
let currentPage = ref(1)
let totalCount = ref(0)
let loadStatus =ref('正在加载中')
let optionsType = ref('')
let orderid = ref('')
const getData = (type) => {
  let data = {
    currentPage: currentPage.value,
    pageSize: pageSize.value
  }
  shopApi.CATEGORYGETFRONTPRODUCTLIST(data).then((res) => {
    if (res.code == 200) {

      totalCount.value = res.result.totalCount
      if (type == 1) {
        productList.value = res.result.data
      } else {
        productList.value = res.result.data ? productList.value.concat(res.result.data) : []
      }
    }else{
        uni.showToast({
            title: res.errMsg,
            icon: "success",
        });
    }

  })
}

onLoad((options) => {
  if(options.value){
    integration.value = options.value
  }
  if(options.type){
    optionsType.value = options.type
  }

  if(options.orderid){
    orderid.value = options.orderid
  }

  getData(1)
})
// 触底加载
onReachBottom(() => {
  console.log("触底加载");
  if (productList.value.length >= totalCount.value) {
    loadStatus.value = "没有更多数据了";
    return
  }
  loadStatus.value = "正在加载中";
  currentPage.value++
  getData(2);
});
// 下拉刷新
onPullDownRefresh(() => {
  console.log("下拉刷新");
  // 正常情况下接口返回应该很会很快。故意延迟调用，让用户有在刷新的体验感
  loadStatus.value = "正在加载中";
  productList.value = [];
  getData(1);
  setTimeout(() => {
    uni.stopPullDownRefresh();
  }, 300);
});


onLoad((option) => {
  console.log("url参数", option);
});


// 组件点击事件
const onGoodsClick = (item) => {
  uni.navigateTo({
    url: `/pages/good/details?id=${item.productId}`
  });
};

</script>

<style lang="scss">
page {
  background-color: #f3f3f3;
}
</style>
<style lang="scss" scoped>
.andry-collection-list {
  .u-search-box-content{
    width: 100%;
    background-color: #fff;
    margin-bottom: 24rpx;
    padding: 24rpx;
    box-sizing: border-box;
    position: sticky;
    top: 0;
    z-index: 99;
  }
  .u-search-box{
    background-color: #fff;
  }
  .card {
    display: flex;
    padding: 24rpx 32rpx;
    box-sizing: border-box;
    border-bottom: 2rpx solid #f6f6f6;
    background-color: #fff;
    border-radius: 16rpx;
    position: relative;
    margin-bottom: 24rpx;
    
  }
  .product-list{
    padding: 24rpx;
    box-sizing: border-box;
  }
}
</style>